<template>
    <div style="padding: 50px;">
        <a-card style="background-color: #27a6fe;color: white;">
            <h1 style="font-size: 22px;">
                欢迎使用 GTenACGN 后台管理站点
            </h1>
            <p style="font-size: 16px;">
                GTenACGN - Admin 是一个基于 Vue3 + Vite2 + Ant-Design-Vue 的后台管理系统。<br />
                其对应的软件实体为 GTenACGN - App，这里提供了安装包供您下载。
            </p>
        </a-card>

        <a-card style="margin-top: 20px;">
            <template #title>
                <span>安装包</span>
            </template>
            <a-list size="large" bordered :data-source="appList">
                <template #header>
                    <span style="font: 700 16px 微软雅黑;">所有版本</span>
                    <span class="smallFont">（部分版本具有明显缺陷，将不会公布安装包）</span>
                </template>
                <template #renderItem="{ item }">
                    <a-list-item>
                        <a :href="'/fileApi/download?fileName=安装包/' + item">
                            {{ item }}
                        </a>
                    </a-list-item>
                </template>
            </a-list>
        </a-card>

        <a-card style="margin-top: 20px;padding-bottom: 50px;">
            <template #title>
                <span>软件预览</span>
                <span class="smallFont">（预览图片来自 0.2.7开发版本）</span>
            </template>
            <a-image-preview-group>
                <a-row align="middle">
                    <a-col :span="12">
                        <a-row :gutter="[16, 24]" justify="center">
                            <a-image class="home-img" src="app-img1.png" />
                            <a-image class="home-img" src="app-img3.png" />
                        </a-row>
                    </a-col>
                    <a-col :span="12" style="text-align: center;">
                        <a-image class="home-img" src="app-img2.png" />
                    </a-col>
                </a-row>
            </a-image-preview-group>
        </a-card>

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { fileApi } from '@/myAxios'
import { HttpStatusCode } from 'axios';

const appList = ref();

onMounted(() => {
    getAppList();
});
const getAppList = async () => {
    const result = await fileApi.get('/list?filePath=安装包');
    if (result.status === HttpStatusCode.Ok) {
        appList.value = result.data;
    }

}
</script>

<style >
.home-img {
    width: 400px !important;
}

.ant-image-mask:hover {
    opacity: 0.2 !important;
}

.smallFont {
    font-weight: 400;
    font-size: 14px;
}
</style>